<template>
    <div>
        <div class="middle">
            <van-tabs v-model="active" scrollspy sticky offset-top=10.933vw >
                <van-tab  title='优惠' name="评价">
            <div class="baoguo">
            <div class="content">
                <div class="team">
                    <div class="team-shop">
                        <div class="left">
                            <img src="yangchaung/Detimg/团购.png" alt="">
                            <div>团购</div>
                        </div>

                        <div class="right">
                            <van-icon name="passed" />
                            <div>随时退</div>
                            <van-icon name="passed" />
                            <div>过期退</div>
                        </div>
                    </div>
                </div>
                <!-- 全部撸宠 -->
                <div class="allpet">
                    <van-tabs v-model="active">
                        <van-tab title="全部"  >
                    <van-row class="row">
                        <van-col span="8">全部</van-col>
                        <van-col span="8">猫咪</van-col>
                        <van-col span="8">其他</van-col>
                    </van-row>
                    <!-- 图片内容 -->
                  <ScorllAllpet/>
                        </van-tab>
                        <van-tab title="撸宠" scrollspy sticky><ScorllAllpet/></van-tab>
                    </van-tabs>
                </div>

            </div>
                 <!-- 分隔框 -->
                <div class="divide">    
                </div>
                <!-- 在售宠物 -->
                <div class="sold-pet">
                    <div class="content">
                        <!-- 在售宠物数量 -->
                       <van-row type="flex" justify="space-between">
                            <van-col span="10">在售宠物(14)</van-col>
                            <van-col span="1"><img src="yangchaung/Detimg/yjt.png" alt=""></van-col>
                        </van-row>
                        <!-- 宠物猫和其他宠物 -->
                        <van-tabs v-model="activeName"  >
                            <van-tab title="宠物猫" name="cat" >
                                <div class="video">
                                    <video src="yangchaung/video/cat.mp4"  class="aaa"  @click="funs" @canplay="getTotal" @timeupdate="timeupdate">
                                    </video>
                                     <van-icon name="play-circle-o" @click="funs"/>
                                     <van-icon name="pause-circle-o" /> 
                                        <!-- 视频播放时间和总时长 -->
                      
                                </div>
                                <div class="timers">{{currentTime}}/{{totalTime}}<span @click="toggleMuted"></span></div>
                            </van-tab> 
                            <van-tab title="标签 2" name="cats">内容 2</van-tab>
                        </van-tabs>
                       
                    </div>
                </div>
                 <!-- 分隔框 -->
                <div class="divide"> 
                     
                      <!-- 静音 -->
                      
                </div>
        </div>
         </van-tab>
                <!-- 评论 -->
                <van-tab  title='评价' name="评价">
                <div class="comment">
                    <div class="content">
                        <!-- 评论数量 -->
                       <van-row type="flex" justify="space-between">
                            <van-col span="10">评价(589)</van-col>
                            <van-col span="1"><img src="yangchaung/Detimg/yjt.png" alt=""></van-col>
                        </van-row>
                            <!-- 6个评论列表 -->
                         <van-tabs v-model="activeName"  >
                            <van-tab :title="v.tyList" name="pj0" v-for="(v,i) in arrs" :key="i" >
                            </van-tab>
                        </van-tabs>
                        <!-- 具体评论 -->
                        <div class="comment-specific" v-for="(items,index) in obj" :key="index">
                            <!-- 头像 -->
                            <div class="head-img" @click="skip"><img :src="items.tyHeadImg" alt=""></div>
                            <!-- 包含头像右侧的盒子 -->
                            <div class="detailed">
                                <!-- 用户名等级 -->
                                <div class="name-level">
                                    <div class="username">{{items.tyName}}</div>
                                    <div class="level"><img :src="items.tylevel" alt=""></div>
                                </div>
                                <!-- 发布时间 -->
                                <div class="issue-time">{{items.tyTime}}</div>
                                <!-- 打分价格 -->
                                <div class="score-price">
                                    <div class="score">打分
                                        <span>
                                            <img :src="items.tyGrade" alt="">
                                            <img :src="items.tyGrade" alt="">
                                            <img :src="items.tyGrade" alt="">
                                            <img :src="items.tyGrade" alt="">
                                            <img :src="items.tyGrade" alt="">
                                        </span>
                                    </div>
                                    <div class="price">￥{{items.tyPrice}}/人</div>
                                </div>
                                <!-- 项目 -->
                                <div class="project">项目：{{items.tyProject}}</div>
                                <!-- 用户评论 -->
                                <div class="user-comment">{{items.tyEvaluation}}  
                                </div>
                                <!-- 猫其他 -->
                                <div class="other"><span>猫</span>{{items.tyProject}}</div>
                                <!-- 用户上传的图片 -->
                                <div class="user-img">
                                    <img   v-for="(it,ind) in items.tyCommentImg " :key="ind" :src="items.tyCommentImg[ind]" alt="">
                               </div>
                            </div>
                        </div>
                    </div>
                </div>
                  </van-tab>
                </van-tabs> 
            <div class="allpj" @click="tz">
                <div class="content">
                    <div>查看全部评价</div>
                    <div><img src="yangchaung/Detimg/yjt.png" alt="" ></div>
                </div>
            </div>
          
         






        </div>
          <div class="divide">
        </div>
    </div>
</template>

<script>
import ScorllAllpet from "@/components/yangchaung/DetailsPage/ScorllAllpet.vue";
// import {yacComment,yacDefiniteComment} from "@/api/yangchuang.js"
import axios from 'axios';

export default {
    components:{
        ScorllAllpet
    },
    data(){
        return{
           active: 2,
           activeName:"cat",
           arrs:[],
           obj:[],
           isPaused:false,  //标记当前播放状态
           currentTime:"00:00",//当前播放时间
           totalTime:"00:00",  //总时长
           isMuted:false  //现在是否是静音
        }
    },
    //  mounted() {
    //      yacComment().then((ok)=>{
    //         this.arrs=ok.data
    //         console.log(ok)
    //     }),
    //     yacDefiniteComment().then((ok)=>{
    //         this.obj=ok.data,
    //         console.log(ok)
    //     })
    // },   
    created () {
        axios.request("http://localhost:8889/yacComment").then(({data})=>{
            this.arrs=data
        })
        axios.request("http://localhost:8889/yacDefiniteComment").then(({data})=>{
            this.obj=data
        })
    },
    
    methods: {  
        funs(){
            this.isPaused=!this.isPaused
            let a=document.querySelector(".van-icon-play-circle-o")
            let b=document.querySelector(".van-icon-pause-circle-o")
            let myVideo=document.querySelector('.aaa')
            if(this.isPaused){
                myVideo.play()
                a.style.display="none"
                b.style.display="block"
            }else{
                myVideo.pause()
                 b.style.display="none"
                a.style.display="block"
            }
     
        },
        //时间格式化处理
        timer(time){
           let mintue=Math.floor((time%3600)/60)
           let second=Math.floor(time%60)
           mintue=mintue<10?"0"+mintue:mintue
           second=second<10?"0"+second:second
           return `${mintue}:${second}`
        },
        //获取总时长
        getTotal(){
            console.log(document.querySelector('.aaa').duration)
            this.totalTime=this.timer(document.querySelector('.aaa').duration)
        },
        //获取当前视频播放到的时间
        timeupdate(){
            this.currentTime=this.timer(document.querySelector('.aaa').currentTime)
        },
        //静音操作
        toggleMuted(){
            this.muted=!this.muted
            document.querySelector('.aaa').muted=!document.querySelector('.aaa').muted
        },
        skip(){
            this.$router.push("/DefEvaPage")
        },
        tz(){
            this.$router.push("/yacAllEvaPage")
        }
    },

}
</script>

<style lang="scss" scoped>
    
    .divide{    
            background: #e6e6e8;
            width: 100vw;
            height: 2.667vw;
        }
    
    .middle{
        height: 326.667vw;
          .content{
            width: 93.067vw;
            height: 80vw;
            margin: auto;
        }
    }
   .video{
    ::v-deep .van-icon{
        position: absolute;
        right: 39.467vw;
        top: 9.333vw;
        font-size: 5.333vw;
    }
     .aaa{
            height: 35vw;
        }
    .van-icon-pause-circle-o{
        display: none;
    }
   }

   .timers{
        position: absolute;
        left: 15.467vw;
        top:39.267vw;
        background: #fff;
        font-size: 4.03vw;
   }
    

     .allpet{
        width: 26.667vw;
        height: 7.2vw;
        ::v-deep .van-tab__text{
            font-size: 3.467vw
        }
        ::v-deep .van-tabs__line{
            bottom: 6.4vw;
        }

     }
     .row{
        width:45.6vw;
        height: 7.2vw;
    }
    .title{
        display: flex;
        justify-content: space-around;
        h3{
            font-size: 4.533vw;
            height: 4.533vw;
        }
    }
    .baoguo{
        .content{
            height:69.333vw;
        }
    }
    .team{
        height: 7.2vw;
        margin-top: 5.2vw;
        .team-shop{
            height: 7.2vw;
            display: flex;
            justify-content: space-between;
            .left{
                display: flex;
                font-size: 2.933vw;
                font-weight: bolder;
                img{    
                    width: 4.533vw;
                    height: 4.533vw;
                    margin-right: 2.133vw;
                }
            }

            .right{
                display: flex;
                font-size: 2.667vw;
                width: 30.133vw;
                justify-content: space-between;
                .van-icon-passed{
                    margin:0.587vw 0 0 0 ;
                }
            }
        }
    }
  
        
       
        .sold-pet{
            height: 50.133vw;;
            width: 100vw;
            .content{
                width: 93.067vw;
                 height: 50.133vw;;
                margin: auto;
                ::v-deep .van-row--flex{
                    margin-top: 3.467vw;
                        img{
                            width: 1.6vw;
                            height: 2.8vw;
                        }
                }
                //宠物和其他宠物开始
                ::v-deep  .van-tabs__wrap{
                    width: 40.8vw;
                    height: 8vw;    
                }
               
            }
             ::v-deep  .van-tab__text--ellipsis{
                    border-radius: 2.133vw;
                    border: 1px solid #eee;
                    font-size: 3.2vw;
                    width: 17.4vw;
                    text-align: center;
                    background: #f3f3f3;
                }
            ::v-deep  .van-tabs__line{
                display: none;
            }
           ::v-deep .van-tabs--line{
                height: 50.133vw;
                .video{
                    height: 39.2vw;
                    line-height:39.2vw ;
                    text-align: center;
                }
           }
            //结束
        }    
        .divide{    
        background: #e6e6e8;
        width: 100vw;
        height: 2.667vw;
    }
        .allpj{
            margin-top: 2.133vw;
            .content{
                display: flex;
                justify-content: space-between;
                font-size: 3.467vw;
                height: 9.333vw;
                line-height:9.333vw;
                img{
                    width: 1.6vw;
                    height: 3vw;
                }
            }
        }

        //评论
        .comment{
            height: auto;
            .content{
                width: 93.067vw;
                height: auto;
            }
             ::v-deep  .van-tabs__line{
                display: none;
            }
            ::v-deep .van-col{
                 img{
                width: 1.6vw;
                height: 2.8vw;
            }
            }  
            ::v-deep  .van-tab__text--ellipsis{
                        border-radius: 2.133vw;
                        border: 1px solid #eee;
                        font-size: 3.2vw;
                        width: 17.4vw;
                        text-align: center;
                        background: #f3f3f3;
                    } 
            ::v-deep .van-tabs__nav{
                flex-wrap: wrap;
                .van-tab{
                    margin-top: 1.6vw;
                    background: #f3f3f3;
                    border-radius: 2.133vw;
                    height: 6.667vw;
                    margin-right: 1.6vw;
                }
            }
            .van-tabs{
                height: 19.267vw;
            }
            ::v-deep van-tabs__nav,::v-deep .van-tabs__wrap{
                 height: 24.267vw;
            }
            ::v-deep van-tabs__nav{
                justify-content: space-between;
            }
            ::v-deep .van-tabs__nav{
                height: 18.667vw ;
            }



        // 具体评论
            .comment-specific{
                display: flex;
                height: 69.333vw;
                border-bottom: 1px solid #eee;
                margin-top: 2.4vw;
                .head-img{
                    img{
                         width: 11.2vw;
                        height: 11.2vw;
                    }
                }
                .detailed{
                    margin-left: 1.867vw;
                    display: flex;
                    flex-direction: column;
                    align-content: space-around;
                    margin-top: 2.667vw;
                    // 用户名等级
                    .name-level{
                        display: flex;
                        .username{
                            color: #446889;
                            font-size: 3.733vw;
                        }
                        .level{
                            img{
                                width: 8.267vw;
                                height: 3.733vw;
                            }
                        }
                    }
                    // 发布时间
                    .issue-time{
                        margin-top: 2.667vw;
                        font-size: 3.2vw;
                        color: #999999;
                    }
                    //dafen
                    .score-price{
                        font-size: 3.2vw;
                        color: #000;
                        display: flex;
                        margin-top: 1.067vw;
                        img{
                            width: 3.467vw;
                            height: 3.467vw;
                            margin-right: 0.533vw;
                        }
                    }
                    //project
                    .project{
                        font-size: 3.2vw;
                        color: #999999;
                    }
                    .user-comment{
                        font-size: 3.333vw;
                        color: #111;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        word-break: break-all;
                    }
                    .other{
                        font-size: 3.733vw;
                        color: #999999;
                        position: relative;
                        span{
                            margin-right: 3.733vw;
                        }
                        span::after{
                            content: "";
                            width: 0.267vw;
                            height:3.2vw;
                            position: absolute;
                            top: 1.208vw;
                            left: 5.867vw;
                            background: #999;   
                            display: inline-block;
                        }
                    }

                    .user-img{
                        display: flex;
                        justify-content: space-between;
                        img{
                            width: 25.867vw;
                            height: 25.867vw;
                            margin-top: 1.333vw;
                        }
                    }

                }
            }
        }

    

        

   

        

</style>
